<header class="navbar navbar-expand-md bd-navbar">
    <div class="container-fluid d-flex align-items-center">
        <h1 class="d-flex align-items-center fs-4 text-white mb-0">
            <!-- <a class="navbar-brand ml-2" href="/{{$ctrl.localizeSettings.lang}}/" target="_blank" aria-label="mixcore"> -->
            <a class="navbar-brand ml-2" href="/" target="_blank" aria-label="mixcore">
                <div class="mixcore-logo" style="
            width: 120px;
            height: 30px;
            background-color: hsla(
              var(--primary-color-hue, 211),
              var(--primary-color-saturation, 100%),
              var(--primary-color-brightness, 50%),
              1
            );
            -webkit-mask: url(../mix-app/assets/mixcore-logo-red-2.svg)
              no-repeat 50% 50%;
            mask: url(../mix-app/assets/mixcore-logo-red-2.svg) no-repeat 50%
              50%;
          "></div>
            </a>

            <button type="button" id="sidebarCollapse" data-bs-toggle="collapse" data-bs-target="#sw-docs-nav"
                aria-controls="sw-docs-nav" class="btn btn-link text-primary" ng-click="$ctrl.toggleSidebar()">
                <span class="mi mi-List"></span>
            </button>
        </h1>
    </div>
    <div class="d-flex pe-2">
        <a class="nav-link text-primary" href="#" data-bs-toggle="modal" data-bs-target="#modal-files">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo" width="30" height="30"
                viewBox="0 0 25 25" stroke-width="1.5" stroke="currentcolor" fill="none" stroke-linecap="round"
                stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <line x1="15" y1="8" x2="15.01" y2="8" />
                <rect x="4" y="4" width="16" height="16" rx="3" />
                <path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5" />
                <path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2" />
            </svg>
        </a>
        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex" ng-if="$ctrl.localizeSettings">
            <li class="nav-item dropdown" ng-if="$ctrl.localizeSettings">
                <!-- <div class="language-switcher portal"></div> -->
                <a href="#" class="nav-link d-flex lh-1 text-reset p-2" data-bs-toggle="dropdown">
                    <span class="flag-icon {{$ctrl.localizeSettings.langIcon}}" title="{{$ctrl.localizeSettings.lang}}"
                        style="width: 30px; height: 30px"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                    <a class="dropdown-item" href="" ng-repeat="culture in $ctrl.localizeSettings.cultures"
                        ng-class="{active: culture.specificulture === $ctrl.localizeSettings.lang}"
                        ng-click="$ctrl.changeLang(culture.specificulture, culture.icon);">
                        <span class="flag-icon {{culture.icon}} me-2"></span>
                        <span ng-bind="culture.description"></span>
                    </a>
                </div>
            </li>
        </ul>
        <!-- <a class="p-2 text-danger" href="#" ng-click="$ctrl.logOut()" rel="noopener" aria-label="Logout">
            <i class="mi mi-PowerButton"></i>
        </a> -->
        <div class="nav-item dropdown">
            <!-- <a href="/portal/my-profile">
                <img class="rounded-circle border" alt="200x200" ng-src="{{$ctrl.avatar}}" data-holder-rendered="true" width="32"
                    height="32" />
            </a> -->
            <a href="/portal/my-profile" class="nav-link d-flex lh-1 text-reset" data-bs-toggle="dropdown"
                aria-label="Open user menu">
                <span class="avatar avatar-sm rounded-circle" style="background-image: url({{$ctrl.avatar}})"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <!-- <a href="#" class="dropdown-item">Set status</a> -->
                <a href="/portal/my-profile" class="dropdown-item">Profile & Account</a>
                <a href="#" ng-click="$ctrl.generateSitemap()" class="dropdown-item">Sitemap</a>
                <a href="#" ng-click="$ctrl.addPermission()" class="dropdown-item"
                    ng-if="$ctrl.isInRole('SuperAdmin')">Create Permission</a>
                <a href="#" ng-click="$ctrl.addBookmark()" class="dropdown-item"
                    ng-if="$ctrl.isInRole('SuperAdmin')">Bookmark</a>
                <a data-bs-toggle="modal" data-bs-target="#modal-template" class="dropdown-item"
                    ng-if="$ctrl.isInRole('SuperAdmin')">Templates</a>
                <a href="https://github.com/mixcore/mix.core/discussions" class="dropdown-item" target="_blank"
                    ng-if="$ctrl.isInRole('SuperAdmin')">Feedback</a>
                <a href="#" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#dev-helper-modal"
                    ng-if="$ctrl.isInRole('SuperAdmin')">User Guide</a>
                <div class="dropdown-divider"></div>
                <a href="/portal/app-settings/details" class="dropdown-item"
                    ng-if="$ctrl.isInRole('SuperAdmin')">Settings</a>
                <a href="#" class="dropdown-item" ng-if="$ctrl.isInRole('SuperAdmin')" data-bs-toggle="modal"
                    data-bs-target="#dlg-portal-theme-settings" ng-if="$ctrl.isInRole('SuperAdmin')">Portal Styling</a>
                <a href="#" ng-click="$ctrl.logOut()" class="dropdown-item text-danger"><i
                        class="mi mi-PowerButton"></i> Logout</a>
            </div>
        </div>
    </div>
</header>
<modal-template></modal-template>